<template>
   <div class="map">
      <van-nav-bar title="地图找房" >
        <template #left>
          <van-icon name="arrow-left" class="iconFont" @click="$router.back()" />
        </template>
      </van-nav-bar>
      <baidu-map  class="map" :center="center" @ready="handler" :zoom="zoom">
        <bm-scale anchor=" BMAP_ANCHOR_BOTTOM_LEFT"></bm-scale>
        <bm-navigation anchor=" BMAP_ANCHOR_BOTTOM_RIGHT"></bm-navigation>
            <!-- BMAP_NAVIGATION_CONTROL_PAN -->
          <bm-overlay
          v-for="item in maplist "
          :key="item.value"
          pane="labelPane"
          :class="{sample: true, active}"
          @draw="draw($event,item.coord)"
          @mouseover.native="active = true"
          @mouseleave.native="active = false"
          @touchend.native='houseItem(item)'
          @click.native='houseItem(item)'
          >
          <p class="font_S"  @click='houseItem(item)'>{{item.label}}{{item.count}}套</p>
        </bm-overlay>
      </baidu-map>
   </div>
</template>

<script>
import { getMap } from '@/api/city.js'
import { Toast } from 'vant'
import { mapState } from 'vuex'
export default {
  data () {
    return {
      // zoom: 15, // 设置初始缩放值 必须设置否则地图不显示
      center: { lat: '', lng: '' },
      maplist: {},
      active: false,
      zoom: 11,
      showZoom: 1
    }
  },

  created () {
    this.onloadMapHouse(this.cityId.value)
  },

  methods: {
    // 获取当前城市的房屋及经纬度
    async onloadMapHouse (value) {
      Toast.loading({
        message: '加载中...',
        forbidClick: true, // 禁止背景点击
        duration: 0 // 持续展示 toast
      })
      try {
        const res = await getMap(value)
        console.log(res)
        this.maplist = res
        Toast.success('加载成功')
      } catch (err) {
        console.log(err)
        Toast.fail('加载失败')
      }
    },

    // 点击每一项
    async houseItem (item) {
      this.showZoom++
      this.center = {
        lng: item.coord.longitude,
        lat: item.coord.latitude
      }
      if (this.showZoom === 2) {
        this.zoom = 13
      } else if (this.showZoom === 3) {
        this.zoom = 16
        console.log(11)
      }
      console.log(item.value)
      await this.onloadMapHouse(item.value)
    },
    draw ({ el, BMap, map }, { longitude, latitude }) {
      const pixel = map.pointToOverlayPixel(new BMap.Point(longitude, latitude))

      el.style.left = pixel.x - 60 + 'px'
      el.style.top = pixel.y - 20 + 'px'
    },
    //
    handler ({ BMap, map }) {
      // // this.center = this.$store.state.cityId.label
      // var map = new BMap.Map('container')
      // map.centerAndZoom(new BMap.Point(116.331398, 39.897445), 12)
      // 创建地址解析器实例
      // 将地址解析结果显示在地图上，并调整地图视野
      this.center = this.cityId.label
    }
  },
  computed: {
    ...mapState(['cityId'])
  }
}
</script>

<style scoped lang='less'>
.map {
  width: 100%;
  height: 622px;
}
.van-nav-bar{
  background-color: #21b97a;
  /deep/.van-nav-bar__title{
    font-size: 18px;
    color: #fff;
  }
    .iconFont{
    color: #fff;
    font-size: 18px;
  }
}
.sample {
  width: 65px;
  height: 65px;
  border-radius: 50%;
  background: rgba(12,181,106,0.9);
  border: 2px solid hsla(0,0%,100%,.8);
  color: #fff;
  text-align: center;
  cursor: pointer;
  position: absolute;
  display: inline-block;
  line-height: 2;
}
  .font_S{
    font-size: 12px;
  }
.sample.active {
  background: rgba(0,0,0,0.75);
  color: #fff;
}
</style>
